<template>
    <!-- 渐变盒子 -->
    <div
        class="linear-box"
        :style="{
            width: boxWidth,
            height: boxHeight,
            background: boxBgc,
            '--width': boxWidth,
            '--color': roundColor,
            '--boxShadow': shadowColor,
            '--smallWidth': smallWidth,
            '--bigRoundTop': bigRoundTop,
            '--bigRoundLeft': bigRoundLeft,
            '--smallRoundBottom': smallRoundBottom,
            '--smallRoundRight': smallRoundRight
        }"
    ></div>
</template>

<script>
export default {
    name: 'LinearBox',
    props: {
        boxWidth: {
            type: String,
            default: () => {
                return '';
            }
        },
        boxHeight: {
            type: String,
            default: () => {
                return '';
            }
        },
        smallWidth: {
            type: String,
            default: () => {
                return '';
            }
        },
        boxBgc: {
            type: String,
            default: () => {
                return '';
            }
        },
        shadowColor: {
            type: String,
            default: () => {
                return '';
            }
        },
        roundColor: {
            type: String,
            default: () => {
                return '';
            }
        },
        bigRoundTop: {
            type: String,
            default: () => {
                return '-125%';
            }
        },
        bigRoundLeft: {
            type: String,
            default: () => {
                return '15%';
            }
        },
        smallRoundBottom: {
            type: String,
            default: () => {
                return '-80%';
            }
        },
        smallRoundRight: {
            type: String,
            default: () => {
                return '-25%';
            }
        }
    },
    data() {
        return {
            theColor: '',
            theWidth: ''
        };
    },
    created() {
        this.theColor = this.roundColor;
        this.theWidth = this.boxWidth;
    }
};
</script>

<style lang="less" scoped>
.linear-box {
    position: relative;
    border-radius: 0.33rem;
    overflow: hidden;
    box-shadow: 0rem 0.67rem 2.5rem 0rem var(--boxShadow);
    &::before {
        content: '';
        width: var(--width);
        height: var(--width);
        position: absolute;
        top: var(--bigRoundTop);
        left: var(--bigRoundLeft);
        border-radius: 50%;
        box-shadow: 0 0.67rem 2.5rem 0 var(--boxShadow);
        background-image: linear-gradient(to right, var(--color), transparent);
    }
    &::after {
        content: '';
        width: var(--smallWidth);
        height: var(--smallWidth);
        position: absolute;
        bottom: var(--smallRoundBottom);
        right: var(--smallRoundRight);
        border-radius: 50%;
        box-shadow: 0 0.67rem 2.5rem 0 var(--boxShadow);
        background-image: linear-gradient(
            to right,
            var(--color),
            transparent
        );
        z-index: 9;
    }
}
</style>
